import React from 'react';
import { connect } from 'umi';
import SequenceOperate from '../SequenceOperate';
import SequenceEcharts from '../SequenceEcharts';
import SequenceTable from '../SequenceTable';
import { TRDefault } from '@/components';

import styles from './index.less';

export const SequenceProportion = (props) => {
  // 获取省份列表
  React.useEffect(() => {
    // props.fetchProvincesEffect();
  }, []);

  return (
    <div className={styles.SequenceProportion}>
      <SequenceOperate />
      <>
        {props.sequenceProportionChartDate ? (
          <>
            <SequenceEcharts />
            <SequenceTable />
          </>
        ) : (
          <TRDefault type="emptysm" />
        )}
      </>
    </div>
  );
};

const mapStateToProps = ({ mediumAndLongTermMarket }) => ({
  sequenceProportionChartDate: mediumAndLongTermMarket.sequenceProportionChartDate,
});

const mapDispatchToProps = (dispatch) => {
  return {
    fetchProvincesEffect: () => dispatch({ type: 'mediumAndLongTermMarket/fetchProvincesEffect' }),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(SequenceProportion);
